<template>
  <div class="containers">
    <!-- 月日历排版 -->
    <div class="selectbox" v-if="bzbs == 1">
      <a-form inline>
        <a-form-item>
          <a-select v-model="curYear" placeholder="请选择">
            <a-option
              v-for="item in yearOptions"
              :key="item.key"
              :value="item.value"
              :label="item.label"
            />
          </a-select>
        </a-form-item>
        <icon-left @click="handleQuickChange('prev')" class="sxcur" />
        <a-form-item>
          <a-select v-model="curMonth" placeholder="请选择">
            <a-option
              v-for="item in monthOptions"
              :key="item.key"
              :value="item.value"
              :label="item.label"
            />
          </a-select>
        </a-form-item>
        <icon-right @click="handleQuickChange('next')" class="sxcur sxcurs" />
      </a-form>
    </div>
    <table class="calendar-table" style="width: 99%" v-if="bzbs == 1">
      <thead>
        <tr class="calendattop">
          <th v-for="(item, i) in weeks" :key="i" style="text-align: center"
            >周{{ item }}</th
          >
        </tr>
      </thead>
      <tbody>
        <tr v-for="(dates, i) in res" :key="i" style="height: 110px">
          <td
            class="dfbox"
            v-for="(item, index) in dates"
            :key="index"
            :class="{
              notCurMonth: !item.isCurMonth,
              notCurMonths: item.isCurMonths,
              currentDay: item.date === curDate,
              selectDay: selectedDates == item.date,
              rangeSelectd: item.isRangeSelected,
              weekend: item.isWeekend,
            }"
            @click="handleItemClick(item, i, index)"
            @mouseenter="handleItemMove(item)"
            @mouseleave="Planbs = ''"
          >
            <span style="z-index: 9" class="daybs">{{
              new Date(item.date).getDate().toString().padStart(2, '0')
            }}</span>
            <div>
              接待人数：
              <span v-if="item.data && item.data.length > 0">
                {{
                  item.data.reduce(
                    (total, currentItem) => total + (currentItem.number || 0),
                    0
                  )
                }}
              </span>
              <span v-else>0</span>
            </div>

            <!-- <span style="z-index: 9">{{ item.date }}</span> -->
            <!-- <slot :data="item" /> -->
            <div class="xhbox" v-if="item.date == Planbs && item.data">
              <div
                v-for="items in item.data"
                :key="items.groupName"
                class="xhitem"
                v-if="userinfo.roleName == '超级管理员'"
              >
                {{ items.groupName }}{{ items.number }}
              </div>
              <div
                v-else
                v-for="items in item.data"
                :key="items.attribute"
                class="xhitem"
              >
                {{ items.attribute }}{{ items.number }}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 日-组长- 管理员查询排版  -->
    <div class="dayadminbox" v-if="roleradmin && bzbs == 2">
      <div class="dayleftbox">
        <div class="daylefttop">时间段</div>
        <div class="dayleftbottom"
          >今日各组接待
          <div v-for="item in Sjdata" :key="item.GroupName">
            {{ item.groupName }}：{{ item.number }}人
          </div>
        </div>
      </div>
      <div class="dayrightbox">
        <!-- 时间段 -->
        <!--  时间段分组 -->
        <div class="fzbox beautifulScroll">
          <div class="dayrighttop">
            <div class="daytimeitem" v-for="item in timeList" :key="item">{{
              item
            }}</div>
          </div>
          <div class="dayrightmain">
            <div
              class="daytimemain"
              v-for="(item, index) in timeList"
              :key="index"
            >
              <!-- 每个 daytimemain 内的内容 -->
              <div
                v-for="(groupName, idx) in getGroupNamesForTimeRange(item)"
                :key="idx"
                class="daytimemainitem"
                @click="admingo(groupName)"
              >
                <div v-if="groupName.number != null">
                  {{ groupName.name }}：{{ groupName.number }}人</div
                >
              </div>
            </div>
          </div>
        </div>

        <div class="dayrightbottom" @click="godd">
          <div>待定组</div>
          <div class="dayrightbottomsy1">{{ waitNumbers }} 人</div></div
        >
      </div>
    </div>
    <!-- 日-组长- 管理员查询排版  -->
    <div class="dayadminbox" v-if="!roleradmin && bzbs == 2">
      <div class="dayleftbox">
        <div class="daylefttop">时间段</div>
        <div class="dayleftbottom"
          >今日组属性接待
          <div v-for="item in daysPb" :key="item.GroupName">
            {{ item.aname }}：{{ item.number }}人
          </div>
        </div>
      </div>
      <div class="dayrightbox">
        <!-- 时间段 -->

        <!--  时间段分组 -->
        <div class="fzbox beautifulScroll">
          <div class="dayrighttop">
            <div class="daytimeitem" v-for="item in timeList" :key="item">{{
              item
            }}</div>
          </div>
          <div class="dayrightmain">
            <div
              class="daytimemain"
              v-for="(item, index) in timeList"
              :key="index"
            >
              <!-- 每个 daytimemain 内的内容 -->
              <div
                @click="checkzz(groupName)"
                v-for="(groupName, idx) in getGroupNamesForTimeRanges(item)"
                :key="idx"
                class="daytimemainitem"
              >
                <div v-if="groupName.number != null">
                  {{ groupName.name }}：{{ groupName.number }}人</div
                >
              </div>
            </div>
          </div>
        </div>

        <div class="dayrightbottom" @click="godd">
          <div>待定组</div>
          <div class="dayrightbottomsy1">{{ waitNumbers }} 人</div></div
        >
      </div>
    </div>
    <!-- 治疗师患者排版 -->
    <div class="timebox" v-if="patientData && bzbs == 3">
      <div class="timeleft">
        <div class="timetop"></div>
        <div class="timebottom">
          <div>{{ GroupName }}-{{ timerdes.name }}</div>
          <div>{{ selectedDates }}</div>
          <div>{{ timerdes.timer }}</div>
          <div>预约详情</div>
          <div v-for="item in patientData" :key="item"
            ><div v-if="item.therapist" class="patientitem">
              {{ item.therapist }}（{{ item.patient.length }}人）
            </div>
          </div>
        </div>
      </div>
      <div class="timeright beautifulScroll">
        <div class="timertop">
          <div class="timertopitem">治疗师</div>
          <!-- 动态生成患者数量 -->
          <div v-for="n in maxPatientCount" :key="n" class="timertopitem"
            >患者{{ n }}
          </div>
        </div>
        <div class="timermian">
          <div
            class="timermainitembox"
            v-for="(item, index) in patientData"
            :key="index"
          >
            <div class="timermainitem">{{ item.therapist }}</div>
            <div
              @click="checkhzxq(items.patientId)"
              class="timermainitem"
              v-for="items in item.patient"
              :key="items"
            >
              {{ items.patientName }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 患者详情 -->

    <div class="containersd" v-if="bzbs == 4">
      <a-card title="患者信息">
        <a-form ref="addModel" :model="addForm">
          <a-row style="display: flex !important">
            <a-col :span="8">
              <a-form-item field="patientName" label="姓名：">
                {{ addForm.patientName }}</a-form-item
              ></a-col
            >
            <a-col :span="8"
              ><a-form-item field="idCard" label="身份证号：">
                {{ addForm.idCard }}</a-form-item
              ></a-col
            >
            <a-col :span="8">
              <a-form-item field="patientSex" label="性别：">
                {{ addForm.patientSex == 'F' ? '男' : '女' }}</a-form-item
              ></a-col
            >
          </a-row>
          <a-row style="display: flex !important; flex-flow: nowrap">
            <a-form-item field="patientAge" label="患者年龄：">
              {{ addForm.patientAge }}
            </a-form-item>
            <a-form-item field="mobile" label="手机号：">
              {{ addForm.mobile }}
            </a-form-item>
            <a-form-item> </a-form-item>
          </a-row>
        </a-form>
      </a-card>
      <a-card title="治疗信息">
        <div class="addzlitembox">
          <div class="addzlbox">
            <a-table
              ref="userList"
              row-key="userId"
              :loading="loading"
              page-position="bottom"
              :pagination="paginations"
              :show-header="false"
              :columns="columnss"
              :data="renderDataxm"
              @page-change="onPageChanges"
              @page-size-change="onPageSizeChanges"
            >
              <template #patientTreatmentId="{ record }">
                <div class="addzlitem">
                  <div class="addzlitemdes"
                    >接待部门：{{ record.groupName }}/{{
                      record.attribute
                    }}</div
                  >
                  <div class="addzlitemdes"
                    >开始时间：{{ record.startDate }}</div
                  >
                  <div class="addzlitemdes">治疗次数：{{ record.number }}</div>
                </div>
              </template>
            </a-table>
          </div>
        </div>
      </a-card>
    </div>
    <!-- 患者详情完成 -->
    <!-- 返回按钮统一 -->
    <div class="backbox" v-if="bzbs > 1">
      <a-button type="primary" status="success" @click="backfn">返回</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, reactive, watch, nextTick } from 'vue';
  import useLoading from '@/hooks/loading';
  import { useSelectionStore, useUserStore } from '@/store';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { Message, Modal } from '@arco-design/web-vue';
  import {
    monthPlan,
    dayGroupPlan,
    dayAttributePlan,
    dayIntervalPlan,
    monthAttributePlan,
    getParent,
    getTimeList,
    waitNumber,
    patientIfo,
    schemeList,
  } from '@/api/restList.ts';
  import { organizationTree } from '@/api/organization.ts';
  import {
    getDaysInMonth,
    handleCrateDate,
    handleCreateDatePicker,
    parseTime,
  } from '@/utils/timeindex';
  import { storeToRefs } from 'pinia';
  import router from '@/router';

  const userStore = useUserStore();
  const userdata = storeToRefs(userStore);

  const userinfo = ref();
  userinfo.value = userdata;
  // 计算最长的患者数组长度
  const maxPatientCount = computed(() => {
    return Math.max(...patientData.value.map((item) => item.patient.length));
  });

  // 定义 周一到周天
  const weeks = ref(['一', '二', '三', '四', '五', '六', '日']);
  // 当前年
  const curYear = ref(new Date().getFullYear());
  // 当前月
  const curMonth = ref(new Date().getMonth());
  // 当月总天数
  const days = ref();
  // 当前日期 yyyy-MM-dd 格式，用来匹配是否是当前日期
  const curDate = ref(parseTime(new Date().getTime()));
  // 非当前月的上一月展示的日期
  const prevDays = ref();
  // 非当前月的下一月展示的日期
  const rearDays = ref();
  // 当前月的日期
  const curDays = ref();
  // 总共展示的42个日期
  const showDays = ref();
  // 二维数组
  const res = ref();
  //   每周的开始日
  const startOfWeek = ref(1);

  // 初始化日期
  const handleGetDays = (year, month, startOfWeek) => {
    showDays.value = [];
    //   获取每个月的总天数
    days.value = getDaysInMonth(year, month);
    // 计算每个月的一天
    let firstDayOfWeek = new Date(`${year}-${month + 1}-01`).getDay();

    // 处理周起始日
    const obj = {
      1: '一',
      2: '二',
      3: '三',
      4: '四',
      5: '五',
      6: '六',
      0: '日',
    };
    const firstDayInCN = obj[firstDayOfWeek];

    const index = weeks.value.indexOf(firstDayInCN);

    // console.log(firstDayOfWeek, index);

    if (firstDayOfWeek == 0) {
      // 星期天为0 星期一为1 ，以此类推
      firstDayOfWeek = 7;
    }

    prevDays.value = handleCrateDate(year, month, 1, index + 1, 'prev');
    rearDays.value = handleCrateDate(
      year,
      month,
      1,
      42 - days.value - index,
      'rear'
    );

    curDays.value = handleCrateDate(year, month, 1, days.value, '');

    startDate.value = curDays.value[0].date;
    endDate.value = curDays.value[curDays.value.length - 1].date;
    // console.log('当前月份日期', startDate, endDate);
    // 请求数据
    //
    //请求结束
    showDays.value.unshift(...prevDays.value);

    showDays.value.push(...curDays.value);
    showDays.value.push(...rearDays.value);
    res.value = handleFormatDates(showDays.value);
  };
  const handleFormatDates = (arr: string | any[], size = 7) => {
    // 传入长度42的原数组，最终转换成二维数组
    const arr2 = [];
    for (let i = 0; i < size; i++) {
      const temp = arr.slice(i * size, i * size + size);
      arr2.push(temp);
    }

    return arr2;
  };
  const startDate = ref();
  const endDate = ref();
  handleGetDays(curYear.value, curMonth.value, startOfWeek.value);
  weeks.value.unshift(...weeks.value.splice(startOfWeek.value - 1));

  //   初始化日期结束

  //   选中日期

  const selectedDates = ref([]);
  const Sjdata = ref();
  const timeList = ref();
  const daysPb = ref();
  const waitNumbers = ref(0);
  const roleradmin = ref();
  // const admingoitem = ref(); //暂存数据方便返回的时候查找
  const handleItemClick = (item, i, j) => {
    // admingoitem.value = item;
    bzbs.value = 2;
    // res.value[i][j].isSelected = !res.value[i][j].isSelected;
    // if (res.value[i][j].isSelected) {
    //   selectedDates.value.push(res.value[i][j].date);
    //   selectedDates.value = Array.from(new Set(selectedDates.value));
    // } else {
    //   selectedDates.value.splice(selectedDates.value.indexOf(item.date), 1);
    // }
    selectedDates.value = res.value[i][j].date;
    // console.log('当前选中日期', selectedDates.value);
    Sjdata.value = item.data;

    // 当是管理员的时候进行进行查阅各组数据
    if (
      userinfo.value.roleName == '超级管理员' ||
      userinfo.value.roleName == '主任'
    ) {
      roleradmin.value = true;
      dayGroupPlan({
        date: item.date,
      }).then((res) => {
        if (res.code == 200) {
          daysPb.value = res.data;

          getTimeList().then((res) => {
            if (res.code == 200) {
              timeList.value = res.data;
            }
          });
          waitNumber().then((res) => {
            if (res.code == 200) {
              waitNumbers.value = res.data;
            }
          });
        }
      });
    } else {
      roleradmin.value = false;
      dayAttributePlan({
        date: item.date,
        groupName: GroupNameId.value,
      }).then((res) => {
        if (res.code == 200) {
          // console.log('组长查询成功', res.data);
          daysPb.value = res.data;

          getTimeList().then((res) => {
            if (res.code == 200) {
              timeList.value = res.data;
            }
          });
          waitNumber().then((res) => {
            if (res.code == 200) {
              waitNumbers.value = res.data;
            }
          });
        }
      });
    }
  };
  // 切换日期
  const handleQuickChange = (type) => {
    if (type === 'prev') {
      curMonth.value--;

      if (curMonth.value == -1) {
        curMonth.value = 11;
        curYear.value -= 1;
      }
    } else if (type === 'next') {
      curMonth.value++;
      if (curMonth.value == 12) {
        curMonth.value = 0;
        curYear.value += 1;
      }
    }
  };
  // 监听curMonth的变化
  watch(curMonth, (newVal) => {
    handleGetDays(curYear.value, newVal, startOfWeek.value);
  });

  // 监听curYear的变化
  watch(curYear, (newVal) => {
    handleGetDays(newVal, curMonth.value, startOfWeek.value);
  });

  //   初始化年 初始化月列表
  const monthOptions = ref(handleCreateDatePicker().months);
  const yearOptions = ref(handleCreateDatePicker().years);
  //   请求当月排班表
  const monthPlandata = ref();
  //  组长身份暂存 id
  const GroupNameId = ref();
  const GroupName = ref();
  const monthPlanget = (startDate: any, endDate: any) => {
    // 判断是组长身份还是主任管理员身份
    if (
      userdata.roleName.value == '超级管理员' ||
      userdata.roleName.value == '管理员' ||
      userdata.roleName.value == '主任'
    ) {
      monthPlan({ startDate: startDate, endDate: endDate }).then((res) => {
        if (res.code == 200) {
          monthPlandata.value = res.data;

          showDays.value.forEach((item) => {
            const dateKey = item.date; // 获取当前日期（例如 '2024-11-25'）

            // 如果 `monthPlandata.value` 中存在对应的日期数据，则将其合并
            if (monthPlandata.value[dateKey]) {
              item.data = monthPlandata.value[dateKey]; // 合并数据
            }
          });

          // console.log('数据更新合并成功', showDays.value, monthPlandata.value);
        }
      });
    } else {
      // console.log('执行了', userinfo.value.organization[0].organizationId);
      getParent({
        id: userinfo.value.organization[0].organizationId,
      }).then((res) => {
        if (res.code == 200) {
          GroupNameId.value = res.data.organizationId;
          GroupName.value = res.data.organizationName;
          monthAttributePlan({
            groupName: res.data.organizationId,
            startDate: startDate,
            endDate: endDate,
          }).then((ress) => {
            if (ress.code == 200) {
              monthPlandata.value = ress.data;

              showDays.value.forEach((item) => {
                const dateKey = item.date; // 获取当前日期（例如 '2024-11-25'）

                // 如果 `monthPlandata.value` 中存在对应的日期数据，则将其合并
                if (monthPlandata.value[dateKey]) {
                  item.data = monthPlandata.value[dateKey]; // 合并数据
                }
              });

              // console.log(
              //   '数据更新合并成功',
              //   showDays.value,
              //   monthPlandata.value
              // );
            }
          });
        }
      });
    }
  };
  monthPlanget(startDate.value, endDate.value);

  const Planbs = ref();
  // 判断鼠标悬浮
  const handleItemMove = (item) => {
    // console.log('鼠标移入悬浮', item);
    Planbs.value = item.date;
    // if(item.date==)
    // monthPlandata.value
  };

  const getGroupNamesForTimeRange = (range) => {
    const [start, end] = range.split('-');

    // 确保数据存在
    if (!daysPb.value) {
      return [];
    }

    // 使用对象来统计每个时间点的分组数量
    const timeGroupCount = {};

    // 遍历数据以统计每个时间的分组数量
    daysPb.value.forEach((data) => {
      const currentTime = data.time;
      if (!timeGroupCount[currentTime]) {
        timeGroupCount[currentTime] = 0;
      }
      timeGroupCount[currentTime]++;
    });

    // 找到所有时间点中的最大数量
    const maxGroupCount = Math.max(...Object.values(timeGroupCount));

    // 获取当前时间段的分组，包含原有数据
    const groupNames = daysPb.value
      .filter((data) => data.time >= start && data.time <= end) // 选择当前时间段的项
      .map((data) => ({
        id: data.groupName || data.attribute,
        game: data.gname,
        name: data.gname || data.aname,
        number: data.number,
        time: data.time,
        timer: range,
      }));

    // 填充空数据以确保数量一致
    while (groupNames.length < maxGroupCount + 5) {
      groupNames.push({ name: '', id: null }); // 添加空数据
    }

    return groupNames;
  };
  const getGroupNamesForTimeRanges = (range) => {
    const [start, end] = range.split('-');
    // 确保数据存在
    if (!daysPb.value) {
      return [];
    }
    // 使用对象来统计每个时间点的分组数量
    const timeGroupCount = {};
    // 遍历数据以统计每个时间的分组数量
    daysPb.value.forEach((data) => {
      const currentTime = data.time;
      if (!timeGroupCount[currentTime]) {
        timeGroupCount[currentTime] = 0;
      }
      timeGroupCount[currentTime]++;
    });
    // 找到所有时间点中的最大数量
    const maxGroupCount = Math.max(...Object.values(timeGroupCount));
    // 过滤出符合时间区间的 gname 和 id
    const groupNames = daysPb.value
      .filter((data) => {
        const currentTime = data.time;
        // 直接比较字符串
        return currentTime >= start && currentTime <= end;
      })
      .map((data) => {
        return {
          game: data.gname,
          name: data.aname,
          number: data.number,
          id: data.attribute,
          time: data.time,
          timer: start + '-' + end,
        };
      });

    // 填充空数据以确保数量一致
    while (groupNames.length < maxGroupCount + 5) {
      groupNames.push({ name: '', id: null }); // 添加空数据
    }

    return groupNames;
  };
  // 管理员 - 查找 组长 下级属性的

  const admingo = (item) => {
    // console.log('item', item);

    if (!item.id) {
      return;
    }
    GroupNameId.value = item.id;
    GroupName.value = item.game;
    roleradmin.value = false;
    dayAttributePlan({
      date: selectedDates.value,
      groupName: item.id,
    }).then((res) => {
      if (res.code == 200) {
        // console.log('查询属性啊', res.data);
        daysPb.value = res.data;

        getTimeList().then((res) => {
          if (res.code == 200) {
            timeList.value = res.data;
          }
        });
        waitNumber().then((res) => {
          if (res.code == 200) {
            waitNumbers.value = res.data;
          }
        });
      }
    });
  };
  // 组长查询 当日 治疗师 排版
  const patientData = ref();
  const timerdes = ref();
  const checkzz = (item) => {
    if (!item.id) {
      return;
    }
    timerdes.value = item;
    bzbs.value = 3;
    // console.log('查询', item);

    const timer = selectedDates.value + ' ' + item.time;
    dayIntervalPlan({
      time: timer,
      groupName: GroupNameId.value,
      attribute: item.id,
    }).then((res) => {
      if (res.code == 200) {
        // 第一步：追加 10 个空对象
        let processedData = [
          ...res.data,
          ...Array(10).fill({ therapist: '', patient: [] }),
        ];

        // 第二步：找到最长的 patient 数组长度
        const maxPatientLength = Math.max(
          ...processedData.map((item) => item.patient.length)
        );

        // 第三步：补齐所有 patient 数组到最长长度，再追加 10 个空对象
        processedData = processedData.map((item) => ({
          therapist: item.therapist || '',
          patient: [
            ...item.patient,
            ...Array(maxPatientLength - item.patient.length).fill(''), // 补齐到最大长度
            ...Array(10).fill(''), // 再追加 10 个空值
          ],
        }));

        patientData.value = processedData;
        // console.log('处理数据完成', patientData.value);
      }
    });
  };

  // 创建步骤标识
  const bzbs = ref(1);
  // 创建步骤 返回标识
  const backfn = () => {
    // 特殊处理管理员那层数据
    if (
      bzbs.value == 2 &&
      userinfo.value.roleName == '超级管理员' &&
      roleradmin.value == false
    ) {
      roleradmin.value = true;
      dayGroupPlan({
        date: selectedDates.value,
      }).then((res) => {
        if (res.code == 200) {
          daysPb.value = res.data;

          getTimeList().then((res) => {
            if (res.code == 200) {
              timeList.value = res.data;
            }
          });
          waitNumber().then((res) => {
            if (res.code == 200) {
              waitNumbers.value = res.data;
            }
          });
        }
      });
      return;
    }
    // 特殊处理管理员那层数据完成
    if (bzbs.value > 1) {
      bzbs.value--;
    }
  };

  // 查询患者详情
  const addForm = ref();
  const renderDataxm = ref([]);
  const patientId = ref();
  const paginations = reactive({
    'current': 1,
    'pageSize': 6,
    'total': 0,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });
  const columnss = computed<TableColumnData[]>(() => [
    {
      title: '插槽',
      dataIndex: 'patientTreatmentId',
      slotName: 'patientTreatmentId',
    },
  ]);

  // 查询患者详情
  const { loading, setLoading } = useLoading(true);
  const checkhzxq = (id) => {
    patientId.value = id;
    patientIfo({
      patientId: id,
    }).then((res) => {
      if (res.code == 200) {
        // console.log('查询患者详情成功', res.data);
        addForm.value = res.data;
        bzbs.value = 4;
      }
    });
    fetchDatajl();
  };

  const onPageChanges = (current: number) => {
    paginations.current = current;
    fetchDatajl();
  };
  const onPageSizeChanges = (pageSize: number) => {
    paginations.pageSize = pageSize;
    fetchDatajl();
  };

  const fetchDatajl = async () => {
    setLoading(true);
    try {
      const data = {
        pageNum: paginations.current,
        ...paginations,
        patientId: patientId.value,
      };
      schemeList(data).then((res) => {
        let list = res.data.list || [];

        renderDataxm.value = list;
        paginations.total = res.data.total;
        paginations.current = res.data.pageNum;
        userList.value.selectAll(false);
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };
  // 查询完成 开始铺设数据

  // 去待定分组

  const godd = () => {
    console.log('执行了');

    router.push({
      name: 'waitList',
    });
  };
</script>
<style scoped>
  .calendar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  .calendar-table {
    table-layout: fixed;
    border-collapse: collapse;
    transition: 0.3s;
    margin: 0 auto;
    text-align: center;
  }

  .calendar-table thead tr {
    height: 50px;
  }

  .calendar-table tbody tr:first-child td {
    border-top: 1px solid #7497e9;
  }

  .calendar-table tbody td {
    cursor: pointer;
    border-right: 1px solid #7497e9;
    border-bottom: 1px solid #7497e9;
  }

  .calendar-table tbody td:first-child {
    border-left: 1px solid #7497e9;
  }

  .notCurMonth {
    color: #ffffff;
    background-color: #c0c4cc;
  }
  .notCurMonths {
    color: #000105 !important;
    background-color: #f2f3f5 !important;
  }
  .currentDay {
    color: #fff;
    background-color: #7497e9;
  }

  .selectDay {
    /* color: #fff;
    background-color: #409eff; */
  }

  .rangeSelectd {
    color: #606266;
    background-color: #dee2e9;
  }

  .weekend {
    color: #f73131;
  }
  .selectbox {
    margin: 0 auto;
    width: 320px;
    height: 80px;
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: center;
  }
  .selectbox .arco-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 50px auto;
  }
  .sxcur {
    font-size: 50px;
    cursor: pointer;
    margin: 0px 5px;
  }
  .sxcurs {
    margin-left: 25px;
  }
  .selectbox .arco-form-item {
    margin-bottom: 0px;
  }
  .dfbox {
    position: relative;
  }
  .dfbox:hover {
    color: #fff;
    background-color: #409eff;
  }
  .daytimemainitem:hover {
    color: #fff;
    background-color: #409eff;
  }
  .timermainitem:hover {
    color: #fff;
    background-color: #409eff;
  }
  .xhbox {
    width: 150px;
    padding: 20px 10px;
    background-color: #fff;
    border: 1px solid #999;
    position: absolute;
    right: 0px;
    z-index: 9;
    display: flex;
    flex-direction: column;
  }
  .xhitem {
    color: #999;
  }
  .daybs {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .containers {
    height: 100%;
    background-color: #fff;
  }
  .calendattop {
    border: 1px solid #7497e9;
  }
  .calendattop th {
    border-right: 1px solid #7497e9;
  }

  .dayadminbox {
    height: 750px;
    width: 1698px;
    display: flex;
    border: 1px solid #e2e2e2;
    background-color: #fff;
    margin: 0px auto;
  }
</style>
